<template>
  <div>
    <!-- 我要拿到这个组件里开关的状态 -->
    <!-- 我还要实现外界给他绑定一个数据，外界给的是true，他里面就是true，外界给false他里面就是false -->
    <!-- <base-switch :value="turnStatus" @input="turnStatus = $event"></base-switch> -->

    <!-- 
    如果你写 v-model="turnStatus"
      他会帮你生成  :value="turnStatus"  以及 @input="turnStatus = $event"
   -->
    <base-switch v-model="turnStatus"></base-switch>
    <p>开关状态现在为： {{ turnStatus }}</p>

    <!-- 拿到选中状态 -->
    <base-check-box v-model="chk1"/>
    <p>选中状态为： {{ chk1 }}</p>


    <base-check-box v-model="chk2">
      全选
    </base-check-box>


    <!-- 我在子组件里写一个type，相当于是父传子 -->
    <!-- 父传子加: 和不加: 的区别 -->
    <!-- 
      加了: 代表写JS表达式（要么找变量，要么写字面量，要么写运算）
      不加: 代表传递的就是字符串
        因为我这个type就是要传字符串而且是为了写死，所以没必要加冒号
     -->
    <base-button type="default">默认</base-button>
    <base-button type="success">成功</base-button>
    <base-button type="danger">失败</base-button>

  </div>
</template>

<script>
import BaseSwitch from "./components/BaseSwitch.vue";
import BaseCheckBox from './components/BaseCheckBox.vue'
import BaseButton from './components/BaseButton.vue'
export default {
  components: {
    BaseSwitch,
    BaseCheckBox,
    BaseButton
  },

  data() {
    return {
      turnStatus: true,
      chk1: false,
      chk2 : true
    };
  },
};
</script>

<style></style>
